<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/gowuche.css"/>
	<body>
		
			<div id="header">					
		<div id="top">
			<p id="p10">您好！欢迎戴欧妮珠宝网！</p>
			<div>
			<span id="top2"><a href="登录页.html">登录</a>
			<a href="注册页.html">注册</a></span>
			<p id="p11">体验中心：新疆.乌鲁木齐北京南路旗舰店 <a href="">切换</a></p>
		
				<div id="lie1" >
				<ul id="_ul1">
					<li><img src="images/213_08.jpg"/><a href="">我的戴欧妮</a></li>
					<li><a href="">我的珠宝箱</a></li>
					<li><a href=""><img src="images/213_10.jpg" id="pic0"/>正品认证</a></li>
					<li><a href=""><img src="images/213_10.jpg"  id="pic1"/>预约进店</a></li>
					<li><a href=""><img src="images/213_03.jpg"/>手机版</a></li>
					<li><a href=""><img src="images/213_05.jpg"/>微信</a></li>
					<li><a href=""><img src="images/213_05.jpg"/>微博</a></li>
				</ul>		
					</div>
		
			</div>
			</div>	
			
		
		
		
		
		
		
		</div>
		<div id="nav">
			<a href=""><img src="images/首页_08.jpg" class="logo" /></a>
			<div id="text1">
				<input type="text" id="input1" />
				<input type="button" value="搜索" id="btn1" />
			</div>
			<div id="wenzi">

				<ul>
					<li>
						<a href="注册页.html">永痕</a>
					</li>
					<li>
						<a href="">浪漫</li>
					<li>
						<a href="">一生</li>
					<li>
						<a href="">爱情</li>
					<li>
						<a href="">密语</li>
				</ul>

			</div>
			<div id="right">
				<img src="images/首页_10.jpg" id="img1" />
				<img src="images/首页_03.jpg" id="img2" />
				<img src="images/首页_05.jpg" id="img3" />

			</div>
			<div id="select1">
				
					<label>所有分类</label>
					
					<ul id="ul_5">
						<li>钻石&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;30分 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;50分</li>
						<li>戒指</li>
						<li>吊坠</li>
						<li>耳饰</li>
						<li>手链</li>
						<li>黄金</li>
						
					
					</ul>
				</div>
			
			<div id="nav1">
				<ul>
					<li>
						<a href="">首页</a>
					</li>
					<li>
						<a href="">裸钻</a>
					</li>
					<li>
						<a href="">钻戒定制</a>
					</li>
					<li>
						<a href="">定位产品</a>
					</li>
					<li>
						<a href="">黄金</a>
					</li>
					<li>
						<a href="">来图定制</a>
					</li>
					<li>
						<a href="">珠宝百科</a>
					</li>
				</ul>
			</div>
			<a href=""><img src="images/首页_17.jpg" id="img5" /></a>
		</div>
		
		
		
					<!--购物车-->
		<div id="buy">
			
		<div id="buy1">
			<div class="catbox">
    <table id="cartTable">
        <thead>
        <tr>
            <th><label>
                <input class="check-all check" type="checkbox">&nbsp;&nbsp;全选</label></th>
            <th>商品</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr class="on">
            <td class="checkbox"><input class="check-one check" type="checkbox"></td>
            <td class="goods"><img src="images/xiangqye/PR-8500-0.jpg" alt=""><span>爱上爱，材质：18K DCW012685D</span></td>
            <td class="price">5999.88</td>
            <td class="count"><span class="reduce"></span>
                <input class="count-input" type="text" value="1">
                <span class="add">+</span></td>
            <td class="subtotal">5999.88</td>
            <td class="operation"><span class="delete">删除</span></td>
        </tr>
        <tr class="on">
            <td class="checkbox"><input class="check-one check" type="checkbox"></td>
            <td class="goods"><img src="images/xiangqye/CD-0110-0.jpg" alt=""><span>火焰之心，材质：18K CPD011934D</span></td>
            <td class="price">3888.50</td>
            <td class="count"><span class="reduce"></span>
                <input class="count-input" type="text" value="1">
                <span class="add">+</span></td>
            <td class="subtotal">3888.50</td>
            <td class="operation"><span class="delete">删除</span></td>
        </tr>
        <tr class="on">
            <td class="checkbox"><input class="check-one check" type="checkbox"></td>
            <td class="goods"><img src="images/xiangqye/1.jpg" alt=""><span>30分VG切工L颜色VS2净度（钻石） 7261378983</span></td>
            <td class="price">4560.50</td>
            <td class="count"><span class="reduce"></span>
                <input class="count-input" type="text" value="1">
                <span class="add">+</span></td>
            <td class="subtotal">4560.50</td>
            <td class="operation"><span class="delete">删除</span></td>
        </tr>
        <tr class="on">
            <td class="checkbox"><input class="check-one check" type="checkbox"></td>
            <td class="goods"><img src="images/xiangqye/201506051503441581 (1).jpg" alt=""><span>五彩缤纷，材质：18K CRB122921D</span></td>
            <td class="price">640.60</td>
            <td class="count"><span class="reduce"></span>
                <input class="count-input" type="text" value="1">
                <span class="add">+</span></td>
            <td class="subtotal">640.60</td>
            <td class="operation"><span class="delete">删除</span></td>
        </tr>
        </tbody>
    </table>
    <div class="foot" id="foot">
        <label class="fl select-all"><input type="checkbox" class="check-all check">&nbsp;&nbsp;全选</label>
        <a class="fl delete" id="deleteAll" href="javascript:;">删除所有已选珠宝</a>
        <div class="fr closing" onclick="getTotal();">结 算</div>
        <input type="hidden" id="cartTotalPrice">
        <div class="fr total">合计：￥<span id="priceTotal">11957.48</span></div>
        <div class="fr selected" id="selected">已选商品<span id="selectedTotal">4</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span></div>
        <div class="selected-view">
            <div id="selectedViewList" class="clearfix"><div><img src=""><span class="del" index="0">取消选择</span></div><div><img src=""><span class="del" index="1">取消选择</span></div><div><img src=""><span class="del" index="2">取消选择</span></div><div><img src=""><span class="del" index="3">取消选择</span></div></div>
            <span class="arrow">◆<span>◆</span></span> </div>
    </div>
</div>
		
		</div>
			
		</div>
		
		<div id="recommend"><p>热门推荐</p></div>
		
		
		<div id="scroll_1">
		<!--热门推荐滚动条-->
		<div id="scroll">
    <a href="javascript:;" class="btn_left"></a>
    <a href="javascript:;" class="btn_right"></a>
    <div class="content">
      <ul>
        <li><a href="#"><img src="images/xiangqye/201506051503441581 (1).jpg" width="200" height="200" alt=""/></a></li>
        <li><a href="#"><img src="images/xiangqye/CF-0111-0.jpg" width="200" height="200" alt=""/></a></li>
        <li><a href="#"><img src="images/xiangqye/fr-9705-0.jpg" width="200" height="200" alt=""/></a></li>
        <li><a href="#"><img src="images/xiangqye/PR-8500-0.jpg" width="200" height="200
        " alt=""/></a></li>
        <li><a href="#"><img src="images/xiangqye/CD-0110-0.jpg" width="200" height="200" alt=""/></a></li>
       
      </ul>
    </div>
  </div>
		</div>
		
		
		
		
		<div class="Tab"><p id="experience">体验中心</p>
			<ul>
				<li class="selected">北京</li>
				<li >深圳</li>
				<li>天津</li>
				<li>成都</li>
				<li>浙江</li>
				<li>江苏</li>
				<li>福建</li>
				<li>海南</li>
				<li>重庆</li>
				<li>湖南</li>
				<li>河北</li>
				<li>江西</li>
			</ul>
			<ol>
				<li class="checked"><img src="images/ka/购物车_03.jpg" />
					<img src="images/ka/beijing.jpg"/></li>
				
				<p><img src="images/ka/购物车_03.jpg" /><img src="images/ka/beijing.jpg"/></p>
				<li><img src="images/ka/购物车_03.jpg" />
					<img src="images/ka/shenzhen.jpg"/></li>
					
					
				<li><img src="images/ka/购物车_03.jpg" />
					<img src="images/ka/tianjin.jpg"/></li>
				
				
				<li><img src="images/ka/购物车_03.jpg" />
					<img src="images/ka/chengdu.jpg"/></li>
				
				
				<li><img src="images/ka/购物车_03.jpg" />
					<img src="images/ka/zhejiang.jpg"/></li>
				
				
				<li><img src="images/ka/购物车_03.jpg" />
					<img src="images/ka/jiangsu.jpg"/></li>
				
				
				<li><img src="images/ka/购物车_03.jpg" />
					<img src="images/ka/fujian.jpg"/></li>
				
				
				<li><img src="images/ka/购物车_03.jpg" />
					<img src="images/ka/hainan.jpg"/></li>
				
				
				<li><img src="images/ka/购物车_03.jpg" />
					<img src="images/ka/hainan.jpg"/></li>
				
				
				<li><img src="images/ka/购物车_03.jpg" />
					<img src="images/ka/hebei.jpg"/></li>
				
				
				<li><img src="images/ka/购物车_03.jpg" />
					<img src="images/ka/jiangxi.jpg"/></li>
				
				
			</ol>				
		</div>
		
		
		
			
		<!--尾部-->
		
		<div id="foot_">
				<a href=""><img src="images/pic/images/免费注册_03.jpg"/></a>
			
		</div>
		
		<div id="non">
		<div id="foot1">
					<div id="main">
					<ul>
				<a href=""><img src="images/pic/images/免费注册_07.jpg" id="pic_1"/></a>
						
						<li><a href="">购买支付</a></li>
						<li><a href="">新手教程</a></li>
						<li><a href="">订购教程</a></li>
						<li><a href="">支付常见问题</a></li>
					</ul>
			</div>
				<div id="main">
					<ul>
				<a href=""><img src="images/pic/images/免费注册_18.jpg" id="pic_1"/></a>
						
						<li><a href="">购买支付</a></li>
						<li><a href="">新手教程</a></li>
						<li><a href="">订购教程</a></li>
						<li><a href="">支付常见问题</a></li>
					</ul>
			</div>
			
			<div id="main">
					<ul>
				<a href=""><img src="images/pic/images/免费注册_09.jpg" id="pic_1"/></a>
						
						<li><a href="">购买支付</a></li>
						<li><a href="">新手教程</a></li>
						<li><a href="">订购教程</a></li>
						<li><a href="">支付常见问题</a></li>
					</ul>
			</div>
			
			<div id="main">
					<ul>
				<a href=""><img src="images/pic/images/免费注册_11.jpg" id="pic_1"/></a>
						
						<li><a href="">购买支付</a></li>
						<li><a href="">新手教程</a></li>
						<li><a href="">订购教程</a></li>
						<li><a href="">支付常见问题</a></li>
					</ul>
			</div>
			
			<div id="main">
					<ul>
				<a href=""><img src="images/pic/images/免费注册_13.jpg" id="pic_1"/></a>
						
						<li><a href="">购买支付</a></li>
						<li><a href="">新手教程</a></li>
						<li><a href="">订购教程</a></li>
						<li><a href="">支付常见问题</a></li>
					</ul>
			</div>
			
			<div id="main">
					<ul>
				<a href=""><img src="images/pic/images/免费注册_15.jpg" id="pic_1"/></a>
						
						<li><a href="">购买支付</a></li>
						<li><a href="">新手教程</a></li>
						<li><a href="">订购教程</a></li>
						<li><a href="">支付常见问题</a></li>
					</ul>
			</div>
		</div>
		</div>
					<div id="big">
				<div id="foot3">
					<ul id="ul_1">
						<li>体验中心地址：新疆乌鲁木齐市北京南路566号小西沟京华杰座711室 联系电话：0991-3671906 联系人：崔先忠</li>
						<li>Copyright @2007-2014深圳戴欧妮网络科技有限公司&nbsp;&nbsp;ALL Rights Reserved 经营许可证编号：粤B-20080371 粤ICP备11058956号-1</li>
						
					</ul>
					
					<ul id="ul_2">
						<li>全球24小时服务热线</li>
						<li>4006-578-478</li>
					</ul>
					</div>
					
				</div>
			<div id="foot4">
				<a href=""><img src="images/pic/images/images/免费注册_03.jpg"/></a>
				
			</div>	
				<div id="big2">
		<div id="foot5">
				<ul>
					<li>友情链接：  钻石  中关村商城 手表品牌排名  裸钻 钻石珠宝论坛  海鞋网 麻豆网  时尚生活网  母亲节礼物   中国美业网  天俊手表   婚戒 结婚 新疆和田玉  楚天运动频道 手礼网  葡萄酒      和玉田 水晶     </li>
					<li>礼品网  股城网  卷皮9.9包邮  国美在线优惠券    建材商城  健一网</li>
					<p>友情链接请加QQ:2992936086</p>
				</ul>
			</div>	
		
		</div>
		
	</body>
</html>
	<script src="js/jquery-1.11.3.js"></script>
	<script >
		
//		购物车
		// window.onload = function (a) {
        if (!document.getElementsByClassName) {
            document.getElementsByClassName = function (cls) {
                var ret = [];
                var els = document.getElementsByTagName('*');
                for (var i = 0, len = els.length; i < len; i++) {

                    if (els[i].className.indexOf(cls + ' ') >=0 || els[i].className.indexOf(' ' + cls + ' ') >=0 || els[i].className.indexOf(' ' + cls) >=0) {
                        ret.push(els[i]);
                    }
                }
                return ret;
            }
        }

        var table = document.getElementById('cartTable'); 
        var selectInputs = document.getElementsByClassName('check'); 
        var checkAllInputs = document.getElementsByClassName('check-all') 
        var tr = table.children[1].rows; //行
        var selectedTotal = document.getElementById('selectedTotal'); 
        var priceTotal = document.getElementById('priceTotal'); 
        var deleteAll = document.getElementById('deleteAll'); 
        var selectedViewList = document.getElementById('selectedViewList'); 
        var selected = document.getElementById('selected'); 
        var foot = document.getElementById('foot');

        function getTotal() {
            var seleted = 0;
            var price = 0;
            var HTMLstr = '';
            for (var i = 0, len = tr.length; i < len; i++) {
                if (tr[i].getElementsByTagName('input')[0].checked) {
                    tr[i].className = 'on';
                    seleted += parseInt(tr[i].getElementsByTagName('input')[1].value);
                    price += parseFloat(tr[i].cells[4].innerHTML);
                    HTMLstr += '<div><img src="' + tr[i].getElementsByTagName('img')[0].src + '"><span class="del" index="' + i + '">取消选择</span></div>'
                }
                else {
                    tr[i].className = '';
                }
            }
            selectedTotal.innerHTML = seleted;
            priceTotal.innerHTML = price.toFixed(2);
            selectedViewList.innerHTML = HTMLstr;

            if (seleted == 0) {
                foot.className = 'foot';
            }
        }
        
        function getSubtotal(tr) {
            var cells = tr.cells;
            var price = cells[2]; 
            var subtotal = cells[4]; 
            var countInput = tr.getElementsByTagName('input')[1]; 
            var span = tr.getElementsByTagName('span')[1]; 
            subtotal.innerHTML = (parseInt(countInput.value) * parseFloat(price.innerHTML)).toFixed(2);
            if (countInput.value == 1) {
                span.innerHTML = '';
            }else{
                span.innerHTML = '-';
            }
        }

        for(var i = 0; i < selectInputs.length; i++ ){
            selectInputs[i].onclick = function () {
                if (this.className.indexOf('check-all') >= 0) { 
                    for (var j = 0; j < selectInputs.length; j++) {
                        selectInputs[j].checked = this.checked;
                    }
                }
                if (!this.checked) { 
                    for (var i = 0; i < checkAllInputs.length; i++) {
                        checkAllInputs[i].checked = false;
                    }
                }
                getTotal();
            }
        }

        selected.onclick = function () {
            if (selectedTotal.innerHTML != 0) {
                foot.className = (foot.className == 'foot' ? 'foot show' : 'foot');
            }
        }

        selectedViewList.onclick = function (e) {
            var e = e || window.event;
            var el = e.srcElement;
            if (el.className=='del') {
                var input =  tr[el.getAttribute('index')].getElementsByTagName('input')[0]
                input.checked = false;
                input.onclick();
            }
        }

        for (var i = 0; i < tr.length; i++) {
            tr[i].onclick = function (e) {
                var e = e || window.event;
                var el = e.target || e.srcElement; 
                var cls = el.className; 
                var countInout = this.getElementsByTagName('input')[1]; 
                var value = parseInt(countInout.value); 
                switch (cls) {
                    case 'add': 
                        countInout.value = value + 1;
                        getSubtotal(this);
                        break;
                    case 'reduce': 
                        if (value > 1) {
                            countInout.value = value - 1;
                            getSubtotal(this);
                        }
                        break;
                    case 'delete': 
                        var conf = confirm('确定删除此商品吗？');
                        if (conf) {
                            this.parentNode.removeChild(this);
                        }
                        break;
                }
                getTotal();
            }
            tr[i].getElementsByTagName('input')[1].onkeyup = function () {
                var val = parseInt(this.value);
                if (isNaN(val) || val <= 0) {
                    val = 1;
                }
                if (this.value != val) {
                    this.value = val;
                }
                getSubtotal(this.parentNode.parentNode); 
                getTotal(); 
            }
        }
        deleteAll.onclick = function () {
            if (selectedTotal.innerHTML != 0) {
                var con = confirm('确定删除所选商品吗？'); 
                if (con) {
                    for (var i = 0; i < tr.length; i++) {
                        if (tr[i].getElementsByTagName('input')[0].checked) {
                            tr[i].parentNode.removeChild(tr[i]); 
                            i--; 
                        }
                    }
                }
            } else {
                alert('请选择商品');
            }
            getTotal(""); 
        }
       
        
        checkAllInputs[0].checked = true;
        checkAllInputs[0].onclick();
        
        
        //滚动条
  var oDiv = document.getElementById('scroll');
  var oUl = oDiv.getElementsByTagName('ul')[0];
  var aLi = oDiv.getElementsByTagName('li');
  var aBtn = oDiv.getElementsByTagName('a');
  var speed = -1;
  var timer = null;
  oUl.innerHTML += oUl.innerHTML;
  oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
  timer = setInterval(function(){
    oUl.style.left = oUl.offsetLeft + speed + 'px';
    if(oUl.offsetLeft < - oUl.offsetWidth / 2){
      oUl.style.left = '0';
    }else if(oUl.offsetLeft > 0){
      oUl.style.left = - oUl.offsetWidth / 2 + 'px';
    }
  },30);
  aBtn[0].onclick = function(){
    speed = -1;
  };
  aBtn[1].onclick = function(){
    speed = 1;
  };
  oUl.onmouseover = function(){
    clearInterval(timer);
  };
  oUl.onmouseout = function(){
    timer = setInterval(function(){
      oUl.style.left = oUl.offsetLeft + speed + 'px';
      if(oUl.offsetLeft < -oUl.offsetWidth / 2){
        oUl.style.left = '0';
      }else if(oUl.offsetLeft > 0){
        oUl.style.left = - oUl.offsetWidth / 2 + 'px';
      }
    },30);
  };
    
	</script>
	
	<script>
		
		

//		选项卡
		$(".Tab>ul>li").click(function(){
			var ind = $(this).index();
			$(".Tab>ul>li").css("background","rosybrown");
			$(this).css("background","brown");
		 	$(".Tab>ol>li").css({"background":"background-image: -webkit-linear-gradient(0deg, red, blue); ","display":"none"});
			$(".Tab>ol>li").eq(ind).css({"background":"pink","display":"block"});	    
		})
			
</script>
		
		
		
		
		
		
	
	